<template>
    <div ref="myChart" style="width:100%;height:100%" id="myChart"></div>
</template>
<script>
export default {
    name: 'radarIndex',
    props: {
        data: {
            type: Array,
            default() {
                return {};
            },
        },
        maxData: {
            type: Array,
            default() {
                return {};
            },
        },
    },
    data: () => ({}),
    mounted() {
        setTimeout(() => {
            this.drawChart();
        }, 1000)
    },
    methods: {
        drawChart() {
            const {myChart} = this.$refs;
            if (myChart) {
                const thisChart = this.$echarts.init(myChart);
                const option = {
                    grid: {},
                    calculable: true,
                    // tooltip: {
                    //     trigger: 'axis',
                    // },
                    title: {
                        text: 'API服务类型',
                        textStyle: {
                            color: '#4EB2F2 ',
                            fontSize: 12,
                            fontWeight:300
                        },
                        top: 0,
                        left: 80,
                    },
                    radar: {
                        indicator: this.maxData,
                        splitNumber: 6, // 雷达图圈数设置\
                        radius: 44,
                        center: ['63%', '43%'],//位置
                        name: {
                            textStyle: {
                                color: '#428BD4',
                                fontSize: 10,
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#4EB2F2',
                                width: 1,
                                opacity: 0.8
                            }
                        },
                        // 设置雷达图中间射线的颜色
                        axisLine: {
                            show: false,
                        },
                    },
                    series: [{
                        type: 'radar',
                        // tooltip: {
                        //     trigger: 'item',
                        //     confine: true,
                        //     backgroundColor: '#161F75',//背景颜色（此时为默认色）
                        //     padding: [8, 15],
                        //     textStyle: {
                        //         color: "#4EB2F2", //设置文字颜色
                        //     },
                        //     position: [330, 0],   //右侧显示
                        //     formatter: function (a) {
                        //         let name = ['产品模型', '设备管理', '执行命令', '存储'];
                        //         let str = a.name + '<br>' + ''
                        //         let data = a.value
                        //         let value = data.reduce(function (a, b) {
                        //             return a + b;
                        //         })
                        //         for (let i = 0; i < name.length; i++) {
                        //             str += '<div style=" width: 110px; display: flex; justify-content: space-between;background-color:#161F75;padding: 5px 0px 0px">' + '<div style="color: #4EB2F2;">' + name[i] + '</div>' +  '' + '<div style="color: #FFC600;">' + ((data[i] / value) * 100).toFixed(0) + '%<br>' + '</div>' + '</div>'
                        //         }
                        //         return str
                        //     }
                        // },
                        areaStyle: {},  // 将每一个产品的雷达图形成阴影的面积
                        data: [{
                            value: this.data,
                            name: 'API服务统计',
                            symbolSize: 0, //拐点的大小
                            areaStyle: {
                                color: '#4EB2F2',
                            },

                        }],
                    }],
                };
                thisChart.setOption(option);
                window.addEventListener('resize', () => {
                    thisChart.resize();
                })
            }
        },
    },
};
</script>
<style lang="less" scoped>

</style>

